<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <style>
        .box {
            width: 100px;
            height: 300px;
            background-color: red;
            /* display: none; */
            /* opacity: 0; */
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <button>点击我显示</button>
    <button>点击我隐藏元素</button>
    <button>显示隐藏切换</button>
    <button>指定显示到某个透明度</button>
    <button>点击我停止动画效果</button>
    <script>
        // jq里的动效；
        // 一、显示/隐藏  效果 
        // $("button").eq(0).on("click",function(){
        //     $("div").show();  // 显示元素；
        // })

        // $("button").eq(1).on("click",function(){
        //     $("div").hide();  // 隐藏元素
        // })

        // $("button").eq(2).on("click",function(){
        //     $("div").toggle();  // 切换
        // })


        // 二、上拉和下拉 

        // 下拉显示 
        // slideDown(过度时间 ，动画完成之后的回调函数)
        // $("button").eq(0).on("click",function(){
        //     $("div").slideDown(1000,function(){
        //         console.log("下拉结束了");
        //     });
        // })

        // // 上拉 隐藏  slideUp

        // $("button").eq(1).on("click",function(){
        //     $("div").slideUp(1000,function(){  //上拉隐藏
        //         console.log("上拉结束了");
        //     });
        // })

        // // 切换操作

        // $("button").eq(2).on("click",function(){
        //     $("div").slideToggle(1000,function(){  //切换
        //         console.log("切换结束了");
        //     });
        // })


        // 三、fadeIn  fadeOut  渐隐 渐显

        // $("button").eq(0).on("click",function(){
        //     $("div").fadeIn(2000,function(){ // 显示 
        //         console.log("渐显结束了");
        //     });
        // })

        // $("button").eq(1).on("click",function(){
        //     $("div").fadeOut(1000,function(){ // 隐藏
        //         console.log("渐隐结束了");
        //     });
        // })


        // $("button").eq(2).on("click",function(){
        //     $("div").fadeToggle(1000,function(){ // 隐藏
        //         console.log("切换结束了");
        //     });
        // })


        // $("button").eq(3).on("click",function(){
        //     $("div").fadeTo(1000,0.5);  // 指定到某个透明度；
        // })


        // $("button").eq(4).on("click",function(){
        //     $("div").stop();  // 停止动画
        // })


        // 四、自定义动画 

        $("button").eq(0).click(function () {
            // $("div").animate({ opacity: 1 },2000,function(){
            //     console.log("动画结束了")
            // })

            $("div").animate({ width: 200 },2000,function(){
                console.log("动画结束了")
            })
        })



    </script>
</body>

</html>